<template>
  <div class="api-info">

    <h3 class="api-title">接口信息</h3>
    <el-form ref="apiForm" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="接口编号：">
            <span>{{apiForm.id}}</span>
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="接口名称：">
            <span>{{apiForm.name}}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="接口状态：">
            <el-tag v-if="apiForm.status == 0" size="medium">未完成</el-tag>
            <el-tag v-else-if="apiForm.status == 1" type="success" size="medium">已完成</el-tag>
            <el-tag v-else-if="apiForm.status == 2" type="danger" size="medium">已废弃</el-tag>
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="更新时间：">
            <span>{{ apiForm.updateTime}}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="创建人：">
            <span>{{ apiForm.createUserName}}</span>
          </el-form-item>
        </el-col>

        <el-col :span="16">

          <el-form-item label="接口路径：">
            <el-tag v-if="apiForm.method == 'GET'">GET</el-tag>
            <el-tag v-else-if="apiForm.method == 'POST'" type="success">POST</el-tag>
            <el-tag v-else-if="apiForm.method == 'DELETE'" type="info">DELETE</el-tag>
            <el-tag v-else-if="apiForm.method == 'PUT'" type="warning">PUT</el-tag>
            <span class="sletter-spacing: 2px;">{{apiForm.path}}</span>

          </el-form-item>

        </el-col>

        <el-col :span="24">

          <el-form-item label="接口描述：">
            <span>{{apiForm.description}}</span>

          </el-form-item>

        </el-col>

      </el-row>

    </el-form>

    <div>

    </div>

    <h3 class="api-title">Request</h3>
    <div style="text-align:center">
      <el-radio-group v-model="apiForm.requestBodyType">
        <el-radio disabled label="form">form</el-radio>
        <el-radio disabled label="json">json</el-radio>
        <el-radio disabled label="file">file</el-radio>
        <el-radio disabled label="row">row</el-radio>
      </el-radio-group>

    </div>

    <div style="margin-top:10px">
      <i class="el-icon-success"></i>
      <span>请求参数</span>
      <el-table :data="apiForm.queryParam" stripe border style="width: 100%" :header-cell-style='headerCellStyle'>
        <el-table-column prop="name" label="参数名" width="180">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="150">
        </el-table-column>
        <el-table-column prop="must" label="是否必输" width="150" :formatter="formatBoolean">
        </el-table-column>
        <el-table-column prop="value" label="示例" width="180">
        </el-table-column>
        <el-table-column prop="remark" label="描述">
        </el-table-column>
      </el-table>

    </div>

    <div style="margin-top:15px">
      <i class="el-icon-success"></i>
      <span>请求头</span>
      <el-table :data="apiForm.requestHeader" stripe border style="width: 100%" :header-cell-style='headerCellStyle'>
        <el-table-column prop="name" label="参数名" width="250">
        </el-table-column>
        <el-table-column prop="value" label="示例" width="180">
        </el-table-column>
        <el-table-column prop="remark" label="描述">
        </el-table-column>
      </el-table>

    </div>

    <div style="margin-top:15px">
      <i class="el-icon-success"></i>
      <span>请求cookie</span>
      <el-table :data="apiForm.cookies" stripe border style="width: 100%" :header-cell-style='headerCellStyle'>
        <el-table-column prop="name" label="参数名" width="250">
        </el-table-column>
        <el-table-column prop="value" label="示例" width="180">
        </el-table-column>
        <el-table-column prop="remark" label="描述">
        </el-table-column>
      </el-table>

    </div>

    <h3 class="api-title" style="margin-top:15px">Response</h3>
    <div>
      <myEditor v-model="apiForm.responseExample" language='dockerfile' title="response"></myEditor>
    </div>

  </div>
</template>

<script>

import myEditor from '@/components/editor/editor.vue'
import { isEmpty } from '@/utils/baseUtil'
export default {
  data () {
    return {

      apiId: null,

      headerCellStyle: {
        'background-color': 'rgb(242, 242, 242)',
        'font-weight': 'bold',
        'color': 'rgb(39, 38, 38)',
        'height': '39px',
      },

      apiForm: {},

    }
  },

  methods: {
    //获取单接口信息
    getApi (apiId) {
      this.$http({
        url: this.$http.adornUrl('/aitesting/api/getById'),
        method: 'get',
        params: {
          id: apiId,
        }
      }).then(({ data }) => {
        if (data.code == 0) {
          this.apiForm = data.data
          //数据转换
          this.apiForm.queryParam = isEmpty(data.data.queryParam) ? [] : JSON.parse(data.data.queryParam)
          this.apiForm.requestHeader = isEmpty(data.data.requestHeader) ? [] : JSON.parse(data.data.requestHeader)
          //保存接口信息
          this.$store.commit("api/updateApiInfoForm", JSON.parse(JSON.stringify(this.apiForm)))
          console.log(this.$store.state.api.apiInfoForm)
        } else {
          this.$message({
            message: data.msg,
            type: 'warning'
          });
        }
      })
    },

    formatBoolean (row, column, cellValue) {
      let ret = ''
      if (cellValue) {
        ret = '是'
      } else {
        ret = '否'
      }
      return ret
    },

  },

  components: {
    myEditor
  },

  watch: {

    //监听接口信息的变化
    '$store.state.api.apiInfoForm' () {
      this.apiForm = JSON.parse(JSON.stringify(this.$store.state.api.apiInfoForm))
    }
  },

  created () {
    this.apiId = this.$route.query.api_id
    this.getApi(this.apiId)
    console.log(this.apiId)

  }
}
</script>


<style scoped>
.api-info >>> .el-table th {
  padding: 0px 0;
}
</style>